<template>
  <view>
    <view class="goods-list">
      <view v-for="(goods, index) in goodsList" :key="goods.goods_id" @click="gotoDetails(goods)">
        <!-- 每一项goods -->
        <my-goods :goods="goods"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsObj: {
          query: '',
          cid: '',
          pagenum: 1, // 请求的页码值 默认1
          pagesize: 10, // 每页的长度
        },
        originPagesize: 10, // 用来求得总的页码值
        total: 0, // list总数量
        goodsList: [], 
        isloading: false, // 节流阀
      };
    },
    onLoad(option) {
      // console.log(option)
      // 将拿到的query或cid赋值给 goodsObj
      this.goodsObj.query = option.query || '',
      this.goodsObj.cid = option.cid || ''
      // console.log(this.goodsObj)
      
      // 获取goodslist数据
      this.getGoodsList()
    },
    methods: {
      async getGoodsList(cb) {
        // 打开节流阀表明正在请求数据
        this.isloading = true
        
        // 第一次请求的时候不用判断
        // 请求之前先判断是否剩余的数量还多于或等于请求的数量，如果多于则正常请求，否则有多少请求多少，因为该api服务器会报错
        if(this.total != 0 && this.goodsObj.pagenum * this.goodsObj.pagesize > this.total) {
          // 拿到剩余数量，并且重新赋值请求的数量
          this.goodsObj.pagesize = this.total % this.goodsObj.pagesize
        }
        // 发起请求获取
        const {data: res} = await uni.$http.get('/api/public/v1/goods/search', this.goodsObj)
        // console.log(res)
        if(res.meta.status !== 200) return uni.$showMsg()
        
        this.total = res.message.total
        this.goodsList = [...this.goodsList, ...res.message.goods]
        
        // 如果有传回调函数则执行回调函数
        cb && cb()
        // 请求数据完成 关闭节流阀
        this.isloading = false
      },
      gotoDetails(goods) {
        // console.log(goods)
        uni.navigateTo({
          url: '/subpkg/goods_details/goods_details?goods_id=' + goods.goods_id
        })
      }
    },
    /**
     * 上拉触底触发的函数
     */
    onReachBottom() {
      // 如果数据正在加载就不会再触发
      if(this.isloading) return 
      
      // 如果所有数据都被请求完 就不再请求并进行提示
      if(this.goodsList.length >= this.total) return uni.$showMsg('无更多数据')
      
      // 请求页码值+1
      this.goodsObj.pagenum++
      this.getGoodsList()
    },
    /**
     * 下拉刷新触发的函数
     */
    onPullDownRefresh() {
      // 重置页码为1、重置goodslist为[]、total为0、一次请求的数量为10
      this.goodsObj.pagenum = 1
      this.goodsObj.pagesize = 10
      this.total = 0
      this.goodsList = []
      
      // 发起请求
      this.getGoodsList(() => {
        // 请求数据完毕后 停止下拉刷新动画
        uni.stopPullDownRefresh()
      })
        
    }
  }
</script>

<style lang="scss">
  .goods-list {
    padding: 0 5px;
    background-color: #FFFFFF;
    
    
  }
</style>
